<script setup lang="ts">
import { cloneDeep } from 'lodash-es'

const emit = defineEmits(['update:routerArr'])

const props = defineProps({
  title: String,
  routeArr: {
    type: Array,
    default: ()=>[],  // [{label:'资产管理'}, {label:'资产详情'}]
  },
  pageBack: {
    type: Function,
    default: (arr) => {}, // 传入函数，默认参数为当前的业内路由数组
  }
})

const pageTtitle = computed(() => {
  if(props.routeArr&&props.routeArr.length) {
    return props.routeArr[props.routeArr.length - 1].label
  } else if(props.title) return props.title
  else return route.meta.title
})

const route = useRoute()

function goBack() {
  let arr = cloneDeep(props.routeArr)
  arr.splice(props.routeArr.length - 1, 1)
  props.pageBack(arr)
  emit('update:routerArr', arr)
}
</script>

<template>
  <div class="page-container">
    <el-row style="align-items: center;margin-bottom: 16px;">
      <div class="go-back" v-show="props.routeArr.length > 1" @click="goBack"><el-icon color="#368EC7"><Back /></el-icon></div>
      <div class="page-title">{{ pageTtitle }}</div>
    </el-row>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  width: 100%;

  .go-back {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 2px 4px 0px rgba(49,51,59,0.06);
    background: #fff;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      box-shadow: 0px 0px 6px 0px rgba(49,51,59,0.2);
    }

  }

  .page-title {
    font-size: 18px;
    color: var(--page-name-color);
  }

  :deep(.el-form--default),
  :deep(.el-space__item) {
    margin-top: 7px !important;
  }

  :deep(.el-form-item--default) {
    /* margin-bottom: 7px !important; */
  }
  :deep(.el-checkbox__input) {
    width: 16px !important;
    height: 16px !important;
  }
  :deep(.el-checkbox__inner) {
    width: 16px !important;
    height: 16px !important;
  }
  :deep(.el-checkbox) {
    margin-right: 18px !important;
  }
}
</style>